<template>
  <j-modal
    :confirmLoading="confirmLoading"
    :forceRender="true"
    :keyboard="false"
    :maskStyle="{'top':'93px','left':'154px'}"
    :title="title"
    :visible="visible"
    :width="width"
    style="top:10%;height: 80%;"
    switchFullscreen
    @cancel="handleCancel">
    <template slot="footer">
      <a-button @click="handleCancel">{{ $t('button.cancel') }}</a-button>

      <!--发起多级审核-->
      <!--      <a-button v-if="!checkFlag" @click="handleWorkflow()" type="primary">{{$t('button.startProcess')}}</a-button>-->
    </template>
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-row :gutter="24" class="form-row">
          <a-col :span="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('search.chequeSerialNo')">
              <a-input :value="model.serialNo" disabled/>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('search.receiptNo')">
              <a-input :value="model.receiptNo" disabled/>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24" class="form-row">
          <a-col :span="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('search.customer')">
              <a-input v-decorator="[ 'supplier']" disabled>
              </a-input>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('search.issueDate')">
              <a-input :value="model.issueDate" disabled />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24" class="form-row">
          <a-col :span="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('search.chequeNumber')">
              <a-input :value="model.chequeNumber" disabled />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('search.salesMan')">
              <a-input :value="model.handsPersonName" disabled />
            </a-form-item>
          </a-col>
        </a-row>


        <a-row :gutter="24" class="form-row">
          <a-col :span="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('search.accountName')">
              <a-input v-decorator="['account']" disabled />

            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('search.payeeName')">
              <a-input v-decorator.trim="[ 'payeeName' ]" disabled />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24" class="form-row">
          <a-col :span="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('search.chequeAmount')">
              <a-input v-decorator.trim="[ 'amount', validatorRules.amount ]" disabled />
            </a-form-item>
          </a-col>

          <a-col :span="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('search.chequeBankName')">
              <a-input v-decorator.trim="[ 'bankName' ]" disabled />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24" class="form-row">
          <a-col :span="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('search.chequePayDate')">
              <a-input v-decorator="['payDate']" disabled />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('search.chequeStatus')">
              <a-input :value="getStatusName(model.status)" disabled />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row :gutter="24" class="form-row">
          <a-col :span="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('search.chequeReturnReason')">
              <a-input v-decorator="[ 'returnReason' ]" disabled />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('search.remark')">
              <a-textarea v-decorator.trim="[ 'remark' ]" :rows="2" disabled />
            </a-form-item>
          </a-col>

        </a-row>
        <template v-if="fileList && fileList.length>0">
          <a-row :gutter="24" class="form-row">
            <a-col :span="12">
              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('search.billAttachment')">
                <j-upload v-model="fileList" bizPath="financial" :disabled="true" :buttonVisible="false"></j-upload>
              </a-form-item>
            </a-col>
          </a-row>
        </template>
      </a-form>
    </a-spin>
    <customer-modal ref="customerModalForm" @ok="customerModalFormOk"></customer-modal>
    <account-modal ref="accountModalForm" @ok="accountModalFormOk"></account-modal>
    <person-modal ref="personModalForm" @ok="personModalFormOk"></person-modal>
    <!--    <workflow-iframe ref="modalWorkflow" @ok="workflowModalFormOk"></workflow-iframe>-->
  </j-modal>
</template>
<script>
import pick from 'lodash.pick'
import CustomerModal from '../../system/modules/CustomerModal'
import AccountModal from '../../system/modules/AccountModal'
import PersonModal from '../../system/modules/PersonModal'
import WorkflowIframe from '@/components/tools/WorkflowIframe'
import {JEditableTableMixin} from '@/mixins/JEditableTableMixin'
import {FinancialModalMixin} from '../mixins/FinancialModalMixin'
import JUpload from '@/components/jeecg/JUpload'
import JDate from '@/components/jeecg/JDate'

export default {
  name: 'ChequeDetailModal',
  mixins: [JEditableTableMixin, FinancialModalMixin],
  components: {
    CustomerModal,
    AccountModal,
    PersonModal,
    WorkflowIframe,
    JUpload,
    JDate,
    VNodes: {
      functional: true,
      render: (h, ctx) => ctx.props.vnodes
    }
  },
  data() {
    return {
      title: this.$t('dynamic.operation'),
      width: '1200px',
      disableSubmit: false,
      moreStatus: false,
      // 新增时子表默认添加几行空数据
      addDefaultRowNum: 0,
      visible: false,
      prefixNo: 'C',
      model: {},
      fileList: [],
      fileName: null,
      statusList: [{ id: 0, name: this.$t('status.unRealized') }, { id: 1, name: this.$t('status.realized') }, {
        id: 2,
        name: this.$t('status.checqueReturn')
      }, {id: 3, name: this.$t('status.returnToCustomer')}],
      labelCol: {
        xs: {span: 24},
        sm: {span: 4}
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 20}
      },
      refKeys: ['accountDataTable'],
      activeKey: 'accountDataTable',
      accountTable: {
        loading: false,
        dataSource: [],
        columns: []
      },
      confirmLoading: false,
      validatorRules: {
        supplierId: {
          rules: [{ required: true, message: this.$t('message.pleaseSelectCustomer') }]
        },
        issueDate: {
          rules: [{ required: true, message: this.$t('message.pleaseSelectIssueDate') }]
        },
        accountId: {
          rules: [{ required: true, message: this.$t('message.pleaseSelectAccount') }]
        },
        amount: {
          rules: [{ required: true, message: this.$t('message.pleaseInputChequeAmount') }]
        },
        fileList: {
          rules: [{ required: true, message: this.$t('message.pleaseUploadCheque') }]
        }
      },
      url: {
        add: '/cheque/add',
        edit: '/cheque/update',
        detailList: '/cheque/info'
      }
    }
  },
  created() {
  },
  methods: {
    show(record, type, prefixNo) {
      this.initCustomer()
      this.initPerson()
      this.initAccount()
      this.visible = true
      this.disableSubmit = true
      this.model = Object.assign({}, record)
      this.$nextTick(() => {
        this.form.setFieldsValue(pick(this.model, 'supplier', 'handsPersonId', 'payDate', 'remark', 'receiptNo',
          'account', 'issueDate', 'chequeNumber', 'returnReason', 'bankName', 'status', 'amount', 'payeeName'))
      })
      // 设置文件列表
      if (record.fileName) {
        this.fileList = record.fileName
      }
    },
    getStatusName (status) {
      const statusMap = {
        0: this.$t('status.unRealized'),
        1: this.$t('status.realized'),
        2: this.$t('status.checqueReturn'),
        3: this.$t('status.returnToCustomer')
      }
      return statusMap[status] || this.$t('status.unknown')
    },


    addInit(amountNum) {

    }

  }
}
</script>
<style scoped>
.action-button {
  margin-bottom: 8px;
}

.gap {
  padding-left: 8px;
}

.textarea-full-width {
  flex-grow: 1;
  min-height: 60px; /* 或者您希望的任何最小高度 */
  width: 100%; /* 确保宽度为100% */
}
</style>